<template>
  <el-card
    class="flex-grow-0 relative"
    shadow="always"
    :header="t('qu-san-kong-zhi')"
    style="--el-card-padding: 0"
  >
    <div class="p-2 flex flex-col text-sm">
      <div class="flex justify-between items-center mb-2">
        <span>{{ t('han-hua') }}</span>
        <el-switch
          size="small"
          :model-value="voice.talkBack"
          @change="voice.handleTalkBack"
        ></el-switch>
      </div>
      <div class="grid gap-2 grid-cols-3 grid-rows-1 w-full mb-2">
        <template v-for="item in buttonList" :key="item.value">
          <el-button size="small" @click="() => onClickBirdAway(item.value)">
            {{ item.content }}
          </el-button>
        </template>
      </div>
      <div class="flex flex-col">
        <el-button size="small" @click="onClickBirdStatus">{{ t('cha-xun-zhuang-tai') }}</el-button>
        <div class="text-nowrap overflow-hidden text-sm mt-2">
          {{ t('zhuang-tai') }}：{{ birStatus }}
        </div>
      </div>
    </div>
    <div class="absolute bottom-2 right-2">
      <el-link
        type="danger"
        @Click="
          () => {
            carRelevant.visible = true
            tracking.visible = false
            // openFeedbackWs(true)
            music.onClickStatus()
            music.onClickMusicList()
            // onClickBirdStatus()
            // light.onClickLightStatus()
            // tracking.getTrackingState()
          }
        "
      >
        {{ t('geng-duo-kong-zhi') }}
      </el-link>
    </div>
  </el-card>
  <CarRelevantDrawer />
</template>

<script setup lang="ts">
import { useMusicStore } from '@/business/music'
import { useTracking } from '@/business/tracking'
import { useCarRelevant } from '@/business/useCarRelevant'
import { useVoiceStore } from '@/business/voice'
import CarRelevantDrawer from '@/components/CarRelevantDrawer.vue'
import { useBirdAway } from '@/composables/useBirdAway'
import { birStatus } from '@/composables/useUpperControl'
import { useI18n } from 'vue-i18n'
const { onClickBirdAway, onClickBirdStatus } = useBirdAway()
const voice = useVoiceStore()
const carRelevant = useCarRelevant()
// 国际化
const { t } = useI18n()
const tracking = useTracking()
const music = useMusicStore()
// 按钮组合
const buttonList = [
  {
    value: 1,
    content: t('qiang-sheng-qu-san')
  },
  {
    value: 2,
    content: t('ruo-sheng-qu-san')
  },
  {
    value: 3,
    content: t('ting-zhi')
  }
  // {
  //   value: 5,
  //   content: t('bo-fang-yu-yin')
  // }
]
</script>
<style scoped lang="scss">
:deep(.el-card__header) {
  padding: 0 0 0 10px;
  font-size: small;
  // border-bottom: none;
}
</style>
